import { useCallback, useState, useReducer } from 'react'
type State<T> = {
  past: T[]
  present: T
  future: T[]
}
const UNDO = 'UNDO'
const REDO = 'REDO'
const RESET = 'RESET'
const SET = 'SET'

type Action<T> = {
  payload?: T
  type: typeof UNDO | typeof REDO | typeof RESET | typeof SET
}

const unReducer = <T>(state: State<T>, action: Action<T>) => {
  const { type, payload } = action
  const { present, past, future } = state
  switch (type) {
    case UNDO: {
      // 不能撤销直接取消操作
      if (past.length === 0) return state

      // 取出数组最后一位
      const previous = past.at(-1) || state
      // 最新的状态
      const newPast = past.slice(0, past.length - 1)

      return {
        past: newPast, // 更新 可撤销状态列表
        present: previous, // 更新当前状态
        future: [present, ...future]
      }
    }
    case REDO: {
      if (future.length === 0) return state

      // 取出第一位
      const next = future[0]
      const newFuture = future.slice(1)

      return {
        past: [...past, present],
        present: next,
        future: newFuture
      }
    }
    case RESET: {
      return {
        past: [],
        present: payload,
        future: []
      }
    }
    case SET: {
      if (payload === state.present) return state
      return {
        past: [...past, present],
        present: payload,
        future: []
      }
    }
    default: {
      return state
    }
  }
}

export const useUndo = <T>(initialPresent: T) => {
  const [state, dispatch] = useReducer(unReducer, {
    past: [], // 过去的状态
    present: initialPresent, // 当前状态
    future: [] // 未来的状态
  })

  // 撤销操作
  const undo = useCallback(() => dispatch({ type: UNDO }), [])

  // 取消撤销操作
  const redo = useCallback(() => dispatch({ type: REDO }), [])

  // 设置值
  const set = useCallback((newValue: T) => dispatch({ type: SET, payload: newValue }), [])
  // 重置操作
  const reset = useCallback((newValue: T) => dispatch({ type: RESET, payload: newValue }), [])

  return { state, undo, redo, set, reset }
}

// export const useUndo = <T>(initialPresent: T) => {
//   // 过去的状态
//   const [past, setPast] = useState<T[]>([])
//   // 当前状态
//   const [present, setPresent] = useState<T>(initialPresent)
//   // 未来的状态
//   const [future, setFuture] = useState<T[]>([])

//   // 是否可以撤回
//   const canUndo = past.length !== 0

//   // 是否可以取消撤回
//   const canRedo = future.length !== 0

//   // 撤销操作
//   const undo = () => {
//     // 不能撤销直接取消操作
//     if (!canUndo) return

//     // 取出数组最后一位
//     const previous = past.at(-1) || initialPresent
//     // 最新的状态
//     const newPast = past.slice(0, past.length - 1)
//     // 更新 可撤销状态列表
//     setPast(newPast)
//     // 更新当前状态
//     setPresent(previous)
//     //更新 取消撤销 状态雷彪
//     setFuture([present, ...future])
//   }

//   // 取消撤销操作
//   const redo = () => {
//     if (!canRedo) return

//     // 取出第一位
//     const next = future[0]
//     const newFuture = future.slice(1)

//     // 可撤销列表新增元素
//     setPast([...past, present])
//     setPresent(next)

//     // 更新 列表
//     setFuture(newFuture)
//   }

//   // 设置值
//   const set = (newValue: T) => {
//     if (newValue === present) {
//       return
//     }

//     //
//     setPast([...past, present])
//     setPresent(newValue)
//     setFuture([])
//   }
//   // 重置操作
//   const rest = (newValue: T) => {
//     setPast([])
//     setPresent(newValue)
//     setFuture([])
//   }

//   return [
//     { past, present, future },
//     { set, rest, undo, redo, canUndo, canRedo }
//   ] as const
// }
